<template>
  <div class="contain">
    <div class="top">
      <div class="left">
        <img :src="userInfo.avatarUrl" class="image">
      </div>
      <div class="right">
        <div class="right_up">
          <label>积分：{{score}}</label>
        </div>
        <div class="right_down" @click.stop>
          <picker @change="subjectPickerChange" :value="subjectIndex" :range="subjects">
            <view class="picker">
              科目：{{subjects[subjectIndex]}}
            </view>
          </picker>
        </div>
      </div>
      <div class="center">
        <div class="center_up">
          <label>用户名：{{userInfo.nickName}}</label>
        </div>
        <div class="center_down" @click.stop>
          <picker @change="gradePickerChange" :value="gradeIndex" :range="grades">
            <view class="picker">
              年级：{{grades[gradeIndex]}}
            </view>
          </picker>
        </div>
      </div>
    </div>
    <div>
      <button class="weui-btn mini-btn" type="primary" size="mini" @click="managerLogin">管理员登录</button>
    </div>
    <div class="down">
      <button class="weui-btn1"  @click="passOrNot">答题闯关</button>
      <button class="weui-btn2"  @click="getRanks">排行榜</button>
      <button class="weui-btn3"  @click="errorProblems">错题本</button>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        userInfo: [],
        score: 0,
        subjectIndex: 0,
        subjects: ['语文', '数学', '英语'],
        gradeIndex: 0,
        grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
      }
    },
    onShow () {
      // 获得用户最新的积分数据
      this.$fly.get(this.$store.state.URL + '/studygo/getUserByUsername', {username: wx.getStorageSync('openid')})
        .then((response) => {
          this.$store.state.score = response.data.data.score
          this.score = this.$store.state.score
        })
        .catch((error) => {
          console.log(error)
        })
    },
    beforeMount () {
      this.userInfo = wx.getStorageSync('userInfo')
      this.$store.state.openid = wx.getStorageSync('openid')
      this.$fly.get(this.$store.state.URL + '/studygo/getUserByUsername', {username: this.$store.state.openid})
        .then((response) => {
          console.log(response)
          this.score = response.data.data.score
          this.$store.state.grade = response.data.data.grade
          this.$store.state.score = this.score
          this.$store.state.userId = response.data.data.id
          wx.setStorage({
            key: 'userId',
            data: response.data.data.id
          })
          // 让picker默认值为用户注册时的年级
          for (let i = 0; i < this.grades.length; i++) {
            if (this.grades[i] === this.$store.state.grade) {
              this.gradeIndex = i
            }
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    methods: {
      managerLogin () {
        wx.navigateTo({
          url: '/pages/manager-login/main'
        })
      },
      passOrNot () {
        wx.navigateTo({
          url: '/pages/user-roundbtn/main'
        })
      },
      getRanks () {
        wx.navigateTo({
          url: '/pages/rank/main'
        })
      },
      errorProblems () {
        wx.navigateToMiniProgram({
          appId: 'wx42fe4acbbe247ed5',
          envVersion: 'trial'
        })
      },
      subjectPickerChange (e) {
        this.subjectIndex = e.mp.detail.value
        this.$store.dispatch('changeSubject', this.subjects[this.subjectIndex])
      },
      gradePickerChange (e) {
        this.gradeIndex = e.mp.detail.value
        this.$store.dispatch('changeGrade', this.grades[this.gradeIndex])
      }
    }
  }
</script>

<style>
  page {
    background-image: url();
  }

  .top {
    height: 100px;
    float: top;
    position: relative;
  }

  .down {
    float: bottom;
    position: relative;
    margin-top: 10%;
    margin-left: 10%;
    margin-right: 10%;
  }

  .left {
    float: left;
    position: relative;

  }

  .center {
    margin-left: 30%;
    margin-right: 40%;
    height: 100px;
    align-items: center;
    position: relative;
  }

  .right {
    float: right;
    position: relative;
  }

  .center_up {
    height: 50px;
    font-size: 18px;
    font-family: "华文楷体";
    float: top;
    position: relative;
    font-weight: bolder;
  }

  .center_down {
    height: 50px;
    font-size: 18px;
    float: bottom;
    position: relative;
    font-family: "华文楷体";
    font-weight: bolder;
  }

  .right_up {
    height: 50px;
    font-size: 18px;
    float: top;
    font-family: "华文楷体";
    font-weight: bolder;
  }

  .right_down {
    height: 50px;
    font-size: 18px;
    float: bottom;
    position: relative;
    font-family: "华文楷体";
    font-weight: bolder;
  }

  .image {
    height: 90px;
    width: 90px;
  }

  .mini-btn {
    border-radius: 98rpx;
    border: 5rpx solid #ffffff;
    background: dodgerblue;
    font-family: "华文楷体";
    color: #ffffff;
    font-size: 18px;
    font-weight: bolder;
  }

  .weui-btn1 {
    color: #ffffff;
    font-family: "华文楷体";
    font-size: 40px;
    font-weight: bolder;
    background: dodgerblue;
    border-radius: 98rpx;
    height: 70px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-repeat: no-repeat;
    background-size: 70px 70px;
  }

  .weui-btn2 {
    color: #ffffff;
    font-family: "华文楷体";
    font-size: 40px;
    font-weight: bolder;
    background: dodgerblue;
    border-radius: 98rpx;
    height: 70px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 10px;
    background-repeat: no-repeat;
    background-size: 70px 70px;
  }

  .weui-btn3 {
    color: #ffffff;
    font-family: "华文楷体";
    font-size: 40px;
    font-weight: bolder;
    background: dodgerblue;
    border-radius: 98rpx;
    height: 70px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 10px;
    background-repeat: no-repeat;
    background-size: 70px 70px;
  }
</style>
